<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    
    <h:head>
        <title>JSF-AJAX-Beispiel</title>
        <h:outputStylesheet library="css" name="styles.css"/>
    </h:head>
    <h:body>
        <ui:composition template="WEB-INF/template/master.xhtml">
            <ui:define name="content">
                <h1>JSF-AJAX-Beispiel</h1>
                <h:form id="spielForm">

                    <h:panelGrid  columns="2">
                        <h:panelGrid columns="1">
                            <h:selectManyListbox id="upperItems" value="#{itemManager.upperSelected}" styleClass="itemlist">
                                <f:selectItems value="#{itemManager.upper}"/>
                            </h:selectManyListbox>

                            <h:panelGroup id="buttonGroup" styleClass="switchButtons">
                                <p:commandButton id="upButton" value="&uarr;" actionListener="#{itemManager.moveUp}" styleClass="switchButton" ajax="false">
                                    <f:ajax execute="spielForm:upButton spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>
                                <p:commandButton id="downButton" value="&darr;" actionListener="#{itemManager.moveDown}" styleClass="switchButton" ajax="false">
                                    <f:ajax execute="spielForm:downButton spielForm:upperItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>
                            </h:panelGroup>

                            <h:selectManyListbox id="lowerItems" value="#{itemManager.lowerSelected}" styleClass="itemlist">
                                <f:selectItems value="#{itemManager.lower}"/>
                            </h:selectManyListbox>
                        </h:panelGrid>

                        <h:panelGroup>
                            <h:panelGrid columns="2" width="100%" style="text-align: center">

                                <p:commandButton id="answer1button" value ="Löschen" actionListener="#{itemManager.deleteSelection}"   styleClass="switchButton2" ajax="false">
                                    <f:ajax execute="spielForm:answer1button spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>

                                <p:commandButton id="duplicate" value ="Duplizieren" actionListener="#{itemManager.duplicateName}"   styleClass="switchButton2" ajax="false">
                                    <f:ajax execute="spielForm:duplicate spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>
                            </h:panelGrid>

                            <h:panelGrid columns="2" width="100%" style="text-align: center">
                                <p:commandButton id="fillList" value ="Befüllen" actionListener="#{itemManager.fillList}"   styleClass="switchButton2" ajax="false">
                                    <f:ajax execute="spielForm:fillList spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>
                                <p:commandButton id="cleanList" value ="Leeren" actionListener="#{itemManager.cleanList}"   styleClass="switchButton2" ajax="false">
                                    <f:ajax execute="spielForm:cleanList spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                                </p:commandButton>
                            </h:panelGrid>
                            <br/>Bitte Text eingeben!
                            <h:panelGrid columns="2" width="100%" style="text-align: left">
                                <p:inputText id="name" value="#{itemManager.text}" style="height: 18px; width: 200px"/>
                            </h:panelGrid>
                            <p:commandButton id="paste" value ="Einfügen" actionListener="#{itemManager.pasteText}"  styleClass="switchButton3" ajax="false">
                                <f:ajax execute="spielForm:name spielForm:paste spielForm:upperItems spielForm:lowerItems" render="spielForm:upperItems spielForm:lowerItems"/>
                            </p:commandButton>
                        </h:panelGroup>
                    </h:panelGrid>
                </h:form>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
